<template>
	<view class="upload-credentials-layout" @tap="selectImage">
		<view class="upload-credentials-placeholder">
			<image class="upload-credentials-placeholder-icon" src="/static/wallet/upload_invoice_img_icon@2x.png" mode="aspectFit"></image>
			<text>{{text}}</text>
		</view>
		<image class="upload-credentials-img" :src="imageUrl" mode="scaleToFill"></image>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	const props = defineProps({
		// 内边距
		padding:{
			type:String,
			default:'50rpx 0'
		},
		// 提示文字
		text:{
			type:String,
			default:'上传开户许可证或者基本存款账户信息'
		}
	})
	// 已上传成功的图片url
	const imageUrl = defineModel()
	// 选择图片
	const selectImage = async ()=>{
		const res = await uni.$utils.uploadImage()
		imageUrl.value = res
	}
</script>

<style lang="scss" scoped>
.upload-credentials-layout{
	position: relative;
	.upload-credentials-placeholder{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border: 1px dotted #eee;
		padding: 50rpx 0;
		color: $xh-color-9;
		font-size: 26rpx;
		.upload-credentials-placeholder-icon{
			width: 60rpx;
			height: 60rpx;
			margin-bottom: 40rpx;
		}
	}
	.upload-credentials-img{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 99;
	}
	
}
</style>